//忘记密码
import React, { useState, useEffect } from 'react'
import '../assets/css/registerAccount.css'
//头部图片logo
import logo from '../assets/images/logo.png'
//内容位图
import weitu1 from '../assets/images/weitu1.jpg'
//获取验证码
import { getCode, register } from '../api'

//表单组件
import { Button, Checkbox, Form, Input, Space, Select, message, notification, Typography } from 'antd';
import {
    useNavigate
} from 'react-router-dom'

export default function Register() {
    const { form } = Form.useForm();
    let nav = useNavigate();
    const onFinish = (values) => {
        console.log('Success:', values);
    };

    let [check, setCheck] = useState(false)

    let [code1, setCode1] = useState({
        code1: ''
    })
    let [userCode, setUserCode] = useState({
        code: '',
        getcode: code1.code1
    })
    //用户信息
    let [user, setUser] = useState({
        phone: "",
        code: "",
        getcode: "12345",
        pwdIpt: '',
        againPwd: ""

    })


    //倒计时
    let [t, setT] = useState(60)
    let [flag, setFlag] = useState(false)
    useEffect(() => {
        if (flag) {
            setTimeout(() => {
                setT(t - 1)
                if (t == 0) {
                    setFlag(false)
                    setT(60)
                }
            }, 1000);
        }
    })


    //注册成功

    return (
        <>
            <div className="yforget">
                <div className="ycontainer">
                    <div className="yheader">
                        <img src={logo} alt="" />
                        <span>资产管理</span>
                    </div>
                    <div className="ycontent">
                        <div className="yform">
                            <div className="ytitle">
                                注册
                            </div>
                            {/* 表单 */}
                            <div className="yformitem">
                                <Form onFinish={() => {
                                    {
                                        !check &&
                                            message.open({
                                                type: 'warning',
                                                content: '请勾选用户使用协议'
                                            })
                                    }
                                    if (check) {
                                        register(user.phone, user.pwdIpt).then(res => {
                                            console.log(res);
                                            message.open({
                                                type: 'success',
                                                content: '注册成功'
                                            })
                                            nav('/login')
                                        })
                                    }

                                }} scrollToFirstErro={true} form={form} name="dependencies" validateTrigger='onBlur'>
                                    {/* 手机号 */}
                                    <div className="yphone">
                                        <Form.Item >
                                            <Space>
                                                <Form.Item
                                                    noStyle
                                                >
                                                    <Select style={{ width: '96px', height: '36px' }} defaultValue='China'>

                                                        <Select.Option value="China">中国+86</Select.Option>
                                                        <Select.Option value="Jiangsu">Jiangsu</Select.Option>
                                                    </Select>
                                                </Form.Item>
                                                <Form.Item
                                                    name='phone'
                                                    noStyle
                                                    rules={
                                                        (user.phone.length > 0 && user.phone.length < 11) || user.phone.length > 11 ? [
                                                            {
                                                                required: true,
                                                                message: '请输入正确的手机号',
                                                                min: 11,
                                                                max: 11
                                                            },
                                                        ] : [
                                                            {
                                                                required: true,
                                                                message: '请输入手机号'
                                                            }
                                                        ]
                                                    }
                                                >
                                                    <Input
                                                        style={{
                                                            width: '240px',
                                                            height: "36px"
                                                        }}
                                                        placeholder="输入手机号"
                                                        value={user.phone}
                                                        onChange={(e) => {
                                                            let p = user
                                                            p.phone = e.target.value
                                                            setUser({ ...p })
                                                            console.log(user.phone);


                                                        }} />
                                                </Form.Item>
                                            </Space>
                                        </Form.Item>

                                    </div>
                                    {/* 验证码  需要判断*/}
                                    <div className="ycode">
                                        {/* <Form.Item name='getcode' rules={
                                            [
                                                {
                                                    required: true,
                                                }
                                            ]
                                        }>
                                            <Input value={code1} onChange={(e) => {
                                                setCode1(e.target.value)
                                                console.log(code1);

                                            }} />
                                        </Form.Item> */}

                                        <Space>

                                            <Form.Item name='code' dependencies={['getcode']} rules={
                                                [
                                                    {
                                                        required: true,
                                                        message: "请输入验证码"
                                                    },
                                                    ({ getFieldValue }) => ({
                                                        validator(_, value) {
                                                            if (!value || getFieldValue('getcode') === value) {
                                                                return Promise.resolve();
                                                            }
                                                            return Promise.reject(new Error('请输入正确的验证码'));
                                                        },
                                                    }),
                                                ]
                                            }>
                                                <Input placeholder='请输入验证码' style={{ width: '254px' }} value={userCode.code} onChange={(e) => {
                                                    let c = userCode
                                                    c.code = e.target.value
                                                    setUserCode({ ...c })
                                                    console.log(userCode.code);
                                                    console.log('code', userCode.getcode);

                                                    // console.log(user.code == user.getcode);

                                                }} />
                                            </Form.Item>
                                            <Form.Item>
                                                <Button style={{ background: '#FFF4D7 ', width: '82px', height: '36px', color: '#F7B500 ' }} type='text' onClick={() => {
                                                    if (user.phone.length == 11) {
                                                        if (!flag) {
                                                            getCode().then(res => {
                                                                let c = userCode
                                                                c.getcode = res.data.code
                                                                setUserCode({ ...c })
                                                                // console.log('1111', userCode.getcode);
                                                                setCode1(res.data.code)
                                                                setTimeout(() => {
                                                                    notification.success(
                                                                        {
                                                                            message: '验证码',
                                                                            description: `${userCode.getcode}`
                                                                        }
                                                                    )
                                                                }, 3000)
                                                                setFlag(true)

                                                            })
                                                        }
                                                    } else if (!user.phone.length) {
                                                        message.open({
                                                            type: 'warning',
                                                            content: "请输入手机号"
                                                        })
                                                    }

                                                }}>{flag ? t : '获取验证码'}</Button>
                                            </Form.Item>
                                        </Space>
                                    </div>
                                    {/* 密码 */}
                                    <div className="ypwd">
                                        {/* <Space> */}
                                        <Form.Item name='pwd' rules={
                                            [
                                                {
                                                    required: true,
                                                    message: '必须包含数字和字母的8-20位密码',
                                                    min: 8,
                                                    max: 20
                                                }
                                            ]
                                        }>
                                            <Input.Password placeholder='请输入密码，包含数字和字母的8-20位密码' style={{ width: '346px' }} value={user.pwdIpt} onChange={(e) => {
                                                let d = user
                                                d.pwdIpt = e.target.value
                                                setUser({ ...d })
                                                console.log(user.pwdIpt);

                                            }} />
                                        </Form.Item>
                                        {/* </Space> */}
                                    </div>
                                    {/* 确认密码 */}
                                    <div className="yconfirm-pwd">
                                        {/* <Space> */}
                                        <Form.Item name='newpwd' dependencies={['pwd']} rules={[
                                            {
                                                required: true,
                                                message: "请再次输入密码"
                                            },
                                            ({ getFieldValue }) => ({
                                                validator(_, value) {
                                                    if (!value || getFieldValue('pwd') === value) {
                                                        return Promise.resolve();
                                                    }
                                                    return Promise.reject(new Error('两次输入的密码不同'));
                                                },
                                            }),
                                        ]}>
                                            <Input.Password placeholder='确认密码' style={{ width: '346px' }} value={user.againPwd} onChange={(e) => {
                                                let a = user
                                                a.againPwd = e.target.value
                                                setUser({ ...a })
                                                console.log(user.againPwd);

                                            }} />
                                        </Form.Item>
                                        {/* </Space> */}
                                    </div>
                                    {/* 提交 */}
                                    <div className="ysubmit" style={{ marginTop: '30px' }}>

                                        <Form.Item >
                                            <Checkbox style={{ marginBottom: '10px', fontSize: ' 12px' }} onClick={() => {
                                                setCheck(!check)
                                                console.log(check);
                                            }}> <span>已阅读并同意</span><span style={{ color: '#8479e3' }}>《用户使用协议》</span></Checkbox>
                                            {/* check为 true 时可以提交 ，为 false 时提示请勾选协议 */}
                                            <Button style={{ width: '346px', background: '#8479E3', color: '#fff', }} htmlType="submit" onClick={() => {


                                            }} >注册</Button>
                                        </Form.Item>

                                    </div>

                                </Form>
                                <div className="ytologin">
                                    <span>已有账号，立即</span>
                                    <span style={{ color: '#8479E3' }} onClick={() => {

                                        nav('/login')
                                    }}>登录</span>

                                </div>

                            </div>
                        </div>
                        <div className="yweitu">
                            <img src={weitu1} alt="" />
                        </div>
                    </div>
                    <div className="yfooter" style={{
                        color: '#B4B4B4', textAlign
                            : 'center', marginTop: '80px'
                    }}>
                        2018-2019 北京乐闻诺科技有限公司 京ICP备19041303号
                    </div>
                </div >
            </div >
        </>
    )
}
